<!-- 网关条件的属性表单 -->
<template>
    <div class="collapse-content-box">
        <a-button type="primary" block @click="triggerModalVisible = true">
            {{ form.condition.rule.length > 0 ? t('triggeringConditioned') : t('addCondition') }}
        </a-button>
        <a-modal
            v-model:visible="triggerModalVisible"
            :title="t('setCondition')"
            width="50%"
            @ok="confirmCondition"
            @cancel="cancelCondition"
        >
            <filter-component
                ref="filterComponentRef"
                :fieldList="props.fetchResponse.pageDetail"
                :condition="form.condition.rule[0].rule"
            />
        </a-modal>
        <!-- 结束 -->
    </div>
</template>

<script lang="ts" setup>
    import { ref, defineProps, watch, defineEmits } from 'vue'
    import { cloneDeep } from 'lodash-es'
    import { message } from 'ant-design-vue'
    import filterComponent from '@/components/common/filterComponent/filterComponent.vue'
    import { taskNodeAttributeForm } from '../../../types/processNodeForm'
    import { createUniqueId } from '@/utils/common'

    // 国际化
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n()
    const props = defineProps({
        processNodeForm: {
            type: Object,
            default: () => ({})
        },
        fetchResponse: {
            type: Object,
            default: () => ({})
        }
    })

    const emit = defineEmits('change')

    const filterComponentRef = ref()
    const form = ref<taskNodeAttributeForm>()
    // 控制网关条件的显示与隐藏
    const triggerModalVisible = ref<boolean>(false)
    const confirmCondition = () => {
        triggerModalVisible.value = false
        filterComponentRef.value
            ?.handleValidate()
            .then(resp => {
                form.value.condition.rule[0].rule = resp
                emit('change', cloneDeep(form.value))
                message.success('触发条件设置成功')
            })
            .catch(err => {
                message.warn('请完善表单数据')
            })
    }
    const cancelCondition = () => {
        triggerModalVisible.value = false
    }
    // 从processNodeForm属性中，获取当前组件需要的表单数据，构造一个新的表单
    function initForm() {
        // 构造任务节点属性表单的逻辑
        const {
            processNodeName,
            nodeTaskType,
            approveUser,
            cc,
            automaticApprovalConfig,
            unapprovedUserProcessMethod,
            responsiblePerson,
            rollbackNodeFlag,
            condition
        } = cloneDeep(props.processNodeForm || {})
        form.value = {
            processNodeName,
            nodeTaskType,
            approveUser,
            cc,
            automaticApprovalConfig,
            unapprovedUserProcessMethod,
            responsiblePerson,
            rollbackNodeFlag,
            condition: {
                rule:
                    condition.rule.length > 0
                        ? condition.rule
                        : [
                              {
                                  id: createUniqueId(),
                                  rule: {},
                                  name: 1,
                                  active: true
                              }
                          ]
            }
        }
    }
    watch(
        () => props.processNodeForm,
        () => {
            // processNodeForm发生变化时，重新初始化一下任务节点属性表单
            initForm()
        },
        {
            deep: true,
            immediate: true
        }
    )
</script>

<style lang="less" scoped></style>
<i18n>
zh-CN:
  triggeringConditioned: 已设置触发条件
  addCondition: 添加触发条件
  setCondition: 设置触发条件
en-US:
  triggeringConditioned: Trigger conditions have been set
  addCondition: Add trigger conditions
  setCondition: Set trigger conditions
</i18n>
